.Tabs {
    cursor: default;
    ul {
        display: flex;
        flex-direction: row;
        text-align: center;
        font-weight: var(--bold-font);

        li {
            padding: 8px 8px 4px;
            box-sizing: border-box;
            border-bottom: solid 1px transparent;
            display: flex;
            flex-direction: column;
            justify-content: center;

            a {
                color: var(--text-color);

                .Icon {
                    & ~ span {
                        // To create gap between icon and title
                        margin-left: 4px;
                    }

                    svg {
                        height: 20px;
                        width: 20px;
                    }
                }
            }

            &.active {
                border-bottom-color: var(--select-border-color);
                a {
                    color: var(--text-color);
                }
            }

            &:not(.active):hover {
                cursor: pointer;
                border-bottom-color: var(--hover-border-color);
                a {
                    color: var(--text-color);
                }
            }
        }
    }

    font-size: var(--small-text-size);

    &.small {
        font-size: var(--xsmall-text-size);
    }

    &.large {
        font-size: var(--text-size);
    }

    &.pills {
        &:not(.light-pills) {
            ul {
                li {
                    background-color: var(--pill-tab-color);

                    &.active {
                        background-color: var(--invert-select-color);
                        a {
                            color: var(--invert-text-color);
                        }
                    }

                    &:not(.active):hover {
                        background-color: var(--hover-bg-color);
                    }
                }
            }
        }
        &.light-pills {
            ul {
                li {
                    background-color: var(--hover-bg-color);

                    &.active {
                        background-color: var(--bg-color);
                    }

                    &:not(.active):hover {
                        background-color: var(--light-bg-color);
                    }
                }
            }
        }

        ul {
            border-radius: var(--border-radius);
            li {
                padding: 4px 16px;
                border-bottom: none;

                &:first-child {
                    border-top-left-radius: var(--border-radius);
                    border-bottom-left-radius: var(--border-radius);
                }
                &:last-child {
                    border-top-right-radius: var(--border-radius);
                    border-bottom-right-radius: var(--border-radius);
                }
            }
        }
    }

    &.wide {
        ul {
            width: 100%;
            li {
                padding-left: 0;
                padding-right: 0;
                flex: 1;
            }
        }
    }

    &.vertical {
        ul {
            flex-direction: column;
        }
    }

    &.center-align {
        ul {
            justify-content: center;
        }
    }
    &.left-align {
        ul {
            justify-content: left;
        }
    }
}
